<template>
  <div class="layout-container" v-loading.fullscreen.lock="loading" element-loading-text="拼命加载中...">
    <LayoutHeader class="layout-header"/>
    <div class="layout-main">
      <LayoutSideBar/>
      <div class="page-container">
        <LayoutTopBar/>
        <!--        <TagsView/>-->
        <PageWidget/>
      </div>
    </div>
    <audio id="audio" muted src="" />
  </div>
</template>

<script>
import LayoutHeader from "@/layouts/layout-header.vue";
import LayoutSideBar from "@/layouts/layout-side-bar.vue";
import TagsView from "@/layouts/tags-view.vue";
import PageWidget from "@/layouts/page-widget.vue";
import LayoutTopBar from "@/layouts/layout-top-bar.vue";


export default {
  name: "index",
  components: {LayoutTopBar, PageWidget, TagsView, LayoutSideBar, LayoutHeader},
  data() {
    return {
      loading: true
    }
  },
  computed: {
    userId: {
      get() {
        return this.$store.state.user.id;
      },
      set(val) {
        this.$store.commit("user/updateId", val);
      }
    },
    userName: {
      get() {
        return this.$store.state.user.name;
      },
      set(val) {
        this.$store.commit("user/updateName", val);
      }
    }
  },
  mounted() {
    // 获取用户信息
    this.loadUserInfo();
  },
  methods: {
    loadUserInfo() {
      this.$http({
        url: this.$http.adornUrl("/sys/user/info"),
        method: "get",
        params: this.$http.adornParams()
      }).then(({
                 data
               }) => {
        if (data && data.code === 0) {
          this.loading = false;
          this.userId = data.user.userId;
          this.userName = data.user.username;
          this.init(data.user.userId);
        }
      });
    },
    init(userId) {
      if (typeof WebSocket === "undefined") {
        alert("您的浏览器不支持socket");
      } else {
        let domain =
          window.SITE_CONFIG["baseUrl"].indexOf("https") > 0 ?
            window.SITE_CONFIG["baseUrl"].replace(/https/g, "wss") :
            window.SITE_CONFIG["baseUrl"].replace(/http/g, "ws");

        // 实例化socket
        this.socket = new WebSocket(`${domain}/websocket/${userId}`);
        // 监听socket连接
        this.socket.onopen = this.open;
        // 监听socket错误信息
        this.socket.onerror = this.error;
        // 监听socket消息
        this.socket.onmessage = this.getMessage;
      }
    },
    open: function() {
      console.log("socket连接成功");
    },
    error: function() {
      console.log("连接错误");
    },
    getMessage: function(msg) {
      console.log("socket",msg)
      if (msg.data.indexOf('NightTrialTask：') != -1) {
        var audioPath = "http://downsc.chinaz.net/Files/DownLoad/sound1/201609/7815.wav";
        if (msg.data.indexOf('正在夜审') != -1) {
          this.loading = true;
          this.loadingText = msg.data.replace('NightTrialTask：', '')

        } else {
          this.loading = false;
          this.loadingText = '正在拼命加载'
          const notify = this.$notify({
            title: "夜审提醒",
            dangerouslyUseHTMLString: true,
            message: `<div>${msg.data.replace('NightTrialTask：', '')}</div>`,
            duration: 1500,
            onClick: (e) => {
              notify.close()
            }
          });
        }
        this.$nextTick(function() {
          const audio = document.getElementById("audio");
          audio.setAttribute("src", audioPath)
          audio.play();
        });
      } else if (msg.data.indexOf('SEND_SMS') != -1) {
        if (msg.data.indexOf('【state：ok】') != -1) {
          this.$message({
            message: `${msg.data.replace('SEND_SMS：', '').replace('【state：ok】', '')}`,
            type: 'success'
          });
        } else {
          this.$message.error(`${msg.data.replace('SEND_SMS：', '')}`);
        }
      } else {
        console.log(msg)
        var audioPath = ""
        var audio1 = ""
        var audio2 = ""
        var audio3 = ""
        //获取设置的铃声
        this.$http({
          url: this.$http.adornUrl("/hotel/hotelordernotification/audio"),
          method: "get",
          params: this.$http.adornParams()
        }).then(({
                   data
                 }) => {
          if (data && data.code === 0) {
            const entity = data.entity
            if (entity.pcAudio == 1) {
              audio1 = entity.audio1Path
              audio2 = entity.audio2Path
              audio3 = entity.audio3Path
            }
            console.log(msg)
            //取消订单提醒
            audioPath = audio1
            if (msg.data.indexOf('您有一条酒店订单已被取消') != -1) {
              audioPath = audio2
            }
            if (msg.data.indexOf('自动为您接单了') != -1) {
              audioPath = audio3
            }
            const notify = this.$notify({
              title: "订单提醒",
              dangerouslyUseHTMLString: true,
              message: `<div>${msg.data}</div>`,
              duration: 0,
              onClick: (e) => {
                this.$router.push({
                  name: "酒店订单"
                });
                notify.close()
              }
            });
            this.$nextTick(function() {
              const audio = document.getElementById("audio");
              audio.setAttribute("src", audioPath)
              audio.play();
            });
          }
        });
      }
    },
    send: function() {
      this.socket.send(this.params);
    },
    close: function() {
      console.log("socket已经关闭");
    }
  }
}
</script>

<style scoped lang="less">
.layout-container {
  height: 100vh;
  overflow: hidden;

  .layout-main {
    height: calc(100vh - 65px);
    display: flex;
    justify-content: flex-start;

    .page-container {
      flex: 1;
      height: 100%;
      overflow: auto;
    }
  }
}
</style>
